<div class="comp-buy-sell">
    <nav class="buy-sell-nav">
        <div class="nav-right"></div>
        <div class="nav-left">
            <a href="javascript:;"
               :class="{'link--active': panType === PAN_TYPE_NORMAL}"
               @click="setPanType(PAN_TYPE_NORMAL)"
               class="link"><img class="nav-img" src="./img/pan-nav1.png" width="17" alt=""></a>
            <a href="javascript:;"
               :class="{'link--active': panType === PAN_TYPE_BUY}"
               @click="setPanType(PAN_TYPE_BUY)"
               class="link"><img class="nav-img" src="./img/pan-nav2.png" width="17" alt=""></a>
            <a href="javascript:;"
               :class="{'link--active': panType === PAN_TYPE_SELL}"
               @click="setPanType(PAN_TYPE_SELL)"
               class="link"><img class="nav-img" src="./img/pan-nav3.png" width="17" alt=""></a>
        </div>
        <div class="nav-bottom">
            <ul class="list">
                <li class="item">{{$t("buySellPan.price")}}({{$$symbol.split('_')[0]}})</li>
                <li class="item">{{$t("buySellPan.amount")}}({{$$symbol.split('_')[1]}})</li>
                <li class="item">{{$t("buySellPan.total")}}({{$$symbol.split('_')[0]}})</li>
            </ul>
        </div>
    </nav>
    <div class="buy-sell-content">
        <div class="content-box" ref="contentBox">

            <!--卖盘-->
            <div class="price-sell" ref="priceSell">
                <div class="sell-box" ref="priceSellBox">
                    <div class="row"
                        :class="item.isUpdate ? 'update' : item.isAdd ? 'add' : item.isDel ? 'del' : '' "
                        v-if="isLoading === false && list_sell_disp.length > 0"
                        v-for="(item, index) in list_sell_disp">
                        <div class="row-red" :style="{'width':item['width']}"></div>
                        <ul class="row-list" @click="setPrice(item.price, item.count)">
                            <li class="item" v-html="item.priceText"></li>
                            <!--<li class="item">{{item.price}}</li>-->
                            <li class="item fn-white">{{item.count}}</li>
                            <li class="item">{{item.total}}</li>
                        </ul>
                    </div>
                </div>
                <div class="sell-box"
                     v-if="isLoading === false && list_sell_disp && list_sell_disp.length === 0"
                     style="min-height: 100%;">
                    <no-data style="padding-bottom: 32px;"></no-data>
                </div>
            </div>

            <!--当前-->
            <div class="price">
                <div class="current current--green"
                     v-if="currentPrice >= lastPrice">
                    <span class="text">{{currentPrice}}</span>
                    <i class="icon icon-price-up"></i>
                </div>
                <div class="current current--red"
                     v-if="currentPrice < lastPrice">
                    <span class="text">{{currentPrice}}</span>
                    <i class="icon icon-price-down"></i>
                </div>
                <!--<div class="money">-->
                    <!--<span class="text">$123456</span>-->
                <!--</div>-->
            </div>

            <!--买盘-->
            <div class="price-buy" ref="priceBuy">
                <div 
                    class="row fn-clearfix" 
                    v-for="(item,index) in list_buy_disp" v-if="isLoading === false && list_buy_disp.length > 0"
                    :class="item.isUpdate ? 'update' : item.isAdd ? 'add' : item.isDel ? 'del' : '' "
                >
                    <div class="row-green" :style="{'width':item['width']}"></div>
                    <ul class="row-list" @click="setPrice(item.price, item.count)">
                        <li class="item" v-html="item.priceText"></li>
                        <!--<li class="item">{{item.price}}</li>-->
                        <li class="item fn-white">{{item.count}}</li>
                        <li class="item">{{item.total}}</li>
                    </ul>
                </div>
                <no-data v-if="isLoading === false && list_buy_disp && list_buy_disp.length === 0" style="padding-top: 32px;"></no-data>
            </div>

        </div>
    </div>
</div>
